<template>
  <el-container>
    <div id="dplayer" style="width: 100%;height: 100%"></div>
<!--    <el-card shadow="always" class="box-card">-->
<!--      <div id="dplayer" style="width: 100%;height: 100%"></div>-->
<!--    </el-card>-->
  </el-container>
</template>

<style scoped>
.box-card {
  width: 100%;
}
:deep(.dplayer-menu > *:nth-last-child(1)) {
  display: none;
}
:deep(.dplayer-menu > *:nth-last-child(2)) {
  display: none;
}
</style>

<script setup>
import DPlayer from 'dplayer';
import {onMounted} from "vue";
import { useRoute } from 'vue-router';

defineOptions({
  name: "Replay"
});

/**
 * 获取当前直播数据
 * @type {RouteLocationNormalizedLoaded}
 */
const route = useRoute();
const url = route.query.url;


/**
 * 初始创建直播组件
 * @type {null}
 */
let dp = null
onMounted(() => {
  dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: true,
    theme: '#13CBD3',
    video: {
      url: url
    }
  });
})
</script>
